<template>
  <el-echarts theme="macarons" :option="option"></el-echarts>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'
export default {
  components: {},
  props: {},
  data() {
    return {
      orgClass: '',
      option: null,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.orgClass = this.$utils.getClientOrgClass()
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let addressCode = this.$utils.getAddressCode()
      let submitType = this.orgClass === 'org_gov_ny' ? '1' : '4'
      let [res] = await this.$utils.promise(
        this.$api.getData('credit', 'credit_funds_total_gov_view', {
          'submit_type.eq': submitType,
          'address_code.eq': addressCode,
        })
      )
      let data = [
        { name: '种植', value: 0 },
        { name: '养殖', value: 0 },
        { name: '农产品加工', value: 0 },
        { name: '农产品商贸流通', value: 0 },
        { name: '涉农服务业', value: 0 },
      ]
      if (res && res.data && res.data.length) {
        const d = res.data[0] || {}
        data = [
          { name: '种植', value: d.zz },
          { name: '养殖', value: d.yz },
          { name: '农产品加工', value: d.jgq },
          { name: '农产品商贸流通', value: d.smlt },
          { name: '涉农服务业', value: d.snfw },
        ]
      }
      const chartData = {
        title: '担保产业统计',
        subtext: '金额（万元）',
        legend: {
          show: false,
          data: ['种植', '养殖', '农产品加工', '农产品商贸流通', '涉农服务业'],
        },
        seriesData: [
          {
            name: '金额（万元）',
            type: 'pie',
            radius: '36%',
            clockwise: false,
            center: ['45%', '55%'],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              formatter: v => echartsXFormatter(v.name),
            },
          },
        ],
      }
      this.setOption(chartData)
    },

    setOption(data) {
      this.option = {
        title: {
          text: data.title,
          subtext: data.subtext,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          right: 10,
          top: 50,
          bottom: 20,
          data: data.legend,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            saveAsImage: { show: true },
          },
        },
        series: data.seriesData,
      }
    },
  },
}
</script>
<style scoped></style>
